<template>
  <div>
    <div
      class="container-fluid"
      style="background-color:#fff;border-bottom-color:#dddddd;border-bottom-width:1px;border-bottom-style:solid">
      <div class="container">
        <div class="col-sm-7" style="padding:0px;color:#555;">
          <h4>
            <strong>
              <i class="icon iconfont icon-square1" style="font-size:20px"></i> S4HANA FICO顾问培训课程
            </strong>
          </h4>
        </div>
        <div class="col-sm-5" style="text-align:center;">
          <img
            src="../../assets/wpw-image/trainbanner.jpg"
            class="img-responsive"
            style="margin-top:2%;margin-bottom:2%;vertical-align:middle;"
          />
        </div>
      </div>
    </div>
    <div class="conts">
     <div class="containers">
      <div
        class="col-sm-4 hidden-xs"
        style="background-color:#fff;margin-top:10px;padding:5px 5px 5px 5px;border:solid;border-color:#e7e7e7;border-width:1px;float:left">
        <div
          class="col-sm-12"
          style="margin-bottom:5px;padding:5px 5px 10px 5px;border-bottom-style:solid;border-bottom-color:#e7e7e7;border-bottom-width:1px">
          <span
            style="padding-bottom:18px;margin-bottom:0px;border-bottom-color:#f98181;border-bottom-style:solid;border-bottom-width:2px;font-size:16px"
          >
            <strong>课程介绍</strong>
          </span>

          <form id="dashangform" style="float:right;" action="/Course/Pay" method="post">
            <input id="courseid" name="courseid" type="number" hidden />
            <input id="sessionid" name="sessionid" type="number" hidden />
            <input id="consumepoint" name="consumepoint" type="hidden" />
          </form>
          <button
            id="dashangbtn"
            data-courseid="5"
            class="btn btn-warning"
            style="color:white;float:right;padding:5px;margin:0px;font-size:14px;font-weight:600"
            type="submit"
            data-toggle="tooltip"
            title="由于金额较大建议扫码联系小编购买!"> 
            <span v-show="spaData.id==1">支付￥6980购买课程</span>
            <span v-show="spaData.id==2">支付￥1680购买课程</span>
            <span v-show="spaData.id==3">支付￥5980购买课程</span>
            <span v-show="spaData.id==4">支付￥3680购买课程</span>
            <span v-show="spaData.id==5">支付￥1980购买课程</span> </button>
        </div>
        <div class="col-sm-5" style="padding:5px 0px 0px 0px;">
            <img src="../../assets/wpw-image/qrcode.jpg" class="img-responsive"/>
        </div>
        <div class="col-sm-7" style="padding:0px;">
                <h3>
                    <span class="label label-danger">永久免费答疑</span></h3>
                    <h4><span class="label label-warning">免费SAP S4HANA学习账户</span>
                </h4>
            <h4>
                <span class="label label-success">详情咨询小编微信</span>
            </h4>
            <p style="font-size:12px;">*答疑仅限课程相关内容，SAP账户有效期半年。</p>
        </div>
        <div class="col-sm-12" style="padding:5px 5px 0px 5px;">
            <p v-show="spaData.struct!==null">
                <strong style="box-sizing: border-box;">
                    <span style="box-sizing: border-box; background-color: rgb(255, 255, 0);">课程构成</span>
                    </strong>
            </p>
            <p v-html='spaData.struct'></p>
            <p v-show="spaData.id>=2&spaData.id!=5">
                <strong style="box-sizing: border-box;">
                    <span style="box-sizing: border-box; background-color: rgb(255, 255, 0);">学习系统</span>
                    </strong>
            </p>
            <p v-show="spaData.id>=2&spaData.id!=5"  v-html="spaData.system"></p>
            <p v-show="spaData.tInfo!==null">
                <strong style="box-sizing: border-box;">
                    <span style="box-sizing: border-box; background-color: rgb(255, 255, 0);">讲师介绍</span>
                    </strong>
            </p>
            <p style=" text-indent:30px" v-html='spaData.tInfo'></p>
            <p v-show="spaData.cInfo!==null">
                <strong style="box-sizing: border-box;">
                    <span style="box-sizing: border-box; background-color: rgb(255, 255, 0);">教材介绍</span>
                    </strong>
            </p>
            <p style=" text-indent:30px" v-html="spaData.cInfo"></p>
            <p v-show="spaData.id==1">
                <strong style="box-sizing: border-box;">
                    <span style="box-sizing: border-box; background-color: rgb(255, 255, 0);">教材和系统</span>
                    </strong>
            </p>
            <p v-show="spaData.id==1" v-html='spaData.system'></p>
            <p v-show="spaData.reply!==null">
                <strong style="box-sizing: border-box;">
                    <span style="box-sizing: border-box; background-color: rgb(255, 255, 0);">答疑方式</span>
                    </strong>
            </p>
            <p style=" text-indent:30px" >{{spaData.reply}}</p>
            <p  v-show="spaData.pay!==null">
                <strong style="box-sizing: border-box;">
                    <span style="box-sizing: border-box; background-color: rgb(255, 255, 0);">课程学费</span>
                    </strong>
            </p>
            <p v-html="spaData.way" class="skfs"></p>
            <p  v-show="spaData.apply!==null">
                <strong style="box-sizing: border-box;">
                    <span style="box-sizing: border-box; background-color: rgb(255, 255, 0);">报名方式</span>
                    </strong>
            </p>
            <p  v-html='spaData.apply'></p>
            <p v-show="spaData.other!==null">
                <strong style="box-sizing: border-box;">
                    <span style="box-sizing: border-box; background-color: rgb(255, 255, 0);">特别声明</span>
                    </strong>
            </p>
            <span style="background-color:yellow;" >{{spaData.other}}</span>
        </div>
      </div>
      <div class="col-sm-8 hidden-xs" style=" margin-top:10px;float:right">
        <table class="table table-bordered table-hover" style="padding:0px 5px 0px 5px; margin-top:10px;background-color:#fff;border-width:1px;">
          <tr v-for="(item,index) in chaData" :key="index" >
                        <td class="col-sm-10 coursca">
                                <a ><span class="text-primay" style="margin-top:2px;margin-bottom:5px;font-weight:600">{{item.title}}</span></a>
                                <span class="label label-primary">时长{{item.duration}}分钟</span>
                                <p style="font-size:12px;padding-top:5px;">{{item.brief}}
                                    <span style="float:right"><button v-show="item.cache!==''" id="172" class="btn btn-default btn-xs" style="font-size: 12px;">{{item.cache}}</button></span>
                                </p>
                                
                        </td>
                        <td class="col-sm-1 coursca">
                                <button v-show="item.isFree==0 && item.many==0" id="dashangbtn" style="font-size:12px;font-weight:600;width:74px;margin-top:7px;color:#ffffff;background-color:#5cb85c;border:1px solid #5cb85c" class="btn btn-warning" data-courseid="5">免费章节<br />请观看</button>
                                <button v-show="item.isFree==1 && item.many==0" id="dashangbtn" style="font-size:12px;font-weight:600;width:74px;margin-top:7px;color:#ffffff" class="btn btn-warning" data-courseid="5">付费观看<br />本课程</button>
                                <button v-show="item.isFree==1 && item.many!==0" id="dashangbtn" style="font-size:12px;font-weight:600;width:74px;margin-top:7px;color:#ffffff" class="btn btn-warning" data-courseid="5">购买本节<br />&yen;{{item.many}}</button>
                        </td>
                    </tr>
        </table>
      </div>
       </div>
    </div>
    <div class="footer" style="text-align: center;height:100px;background-color:#2e2e2e;margin-top:10px;font-size:14px;">
        本站所有电子书全部来自于互联网，欢迎大家给小编投稿+V:FICODK
        <p>© 2018 All Rights Reserved by SAPDOC.cn. | <a href="http://www.miitbeian.gov.cn/" style="color:#e5e5e5;font-size:14px">沪ICP备17005776号-3</a></p>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
          spaData:{
           tInfo:''
          },
          chaData:[]
          
        }
    },
    methods:{
      // 课程介绍
      async getCourse(){
        // 获取指定id本地存储的值
        const ab = localStorage.getItem('id');
        const {data:res} = await this.$axios.get("/spa",{params:{id:ab}});
        this.spaData=res.data[0];
      },
      // 课程
      async getChapter(){
        const ac = localStorage.getItem('id');
        const {data:res} = await this.$axios.get("/spas",{params:{id:ac}});
        console.log(res.data);
        this.chaData=res.data;
      }
    },
    created(){
      console.log(this.$route.params.id);
      this.getCourse();
      this.getChapter();
    }
}
</script>

<style scoped>

.container-fluid {
  width: 100%;
}
.container {
  width: 1170px;
  height: 58px;
  margin: 0 auto;
}
.containers {
  width: 1170px;
  margin: 0 auto;
  overflow: hidden;
}
.conts{
    width: 100%;
    background-color: #fcf8e3;
    overflow: hidden;
}
h4 {
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
  display: block;
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
.col-sm-7 {
  float: left;
}
.col-sm-5 {
  float: left;
}
h3, .h3 {
    font-size: 24px;
}
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}
.label-danger {
    background-color: #d9534f;
}
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    
}
.img-responsive{
    max-width: 100%;
}
h4, .h4 {
    font-size: 18px;
}
h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.label-warning {
    background-color: #f0ad4e;
}
.label-success {
    background-color: #5cb85c;
}
.label-primary {
    background-color: #337ab7;
    font-size: 11px;
    margin-left: 5px;
}
.btn-default:active:hover{
      color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}
.btn-default{
   border:1px solid #cccccc;
   padding: 0 5px;
}
.coursca{
  padding: 8px;
}
.footer {
    padding: 20px 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: 1px solid #e5e5e5;
    margin-bottom: 0;
}
</style>